<template>
  <ul class="type-tab-container" ref="type-tab-con">
    <li
      v-for="(item, index) in tabs"
      :style="{ cursor: allowClick(writeState, item) }"
      :key="index"
      :class="[
        'type-tab-item',
        activeName == item.name && 'type-tab-item-select',
      ]"
      @click="allowPick(writeState, item) && changeTab(item, index)"
    >
      <div class="label">
        {{ item.label }}

        <div class="new" v-if="item.hasNew"></div>
        <div class="newNum" style="background:#ff0c0c" v-if="item.newMes">{{ item.newMes }}</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "typeTab",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    writeState: {
      type: Object,
      default: () => {
        return null;
      },
    },
    tabs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    value: {
      type: String,
      default: "",
    },
    changeable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      activeName: this.value,
    };
  },
  computed: {},
  mounted() {},

  methods: {
    allowPick(val, item) {
      // 如果没有val
      if (!val) return true;

      if (item.label == "PS") {
        if (val.ps != 100) {
          return false;
        } else {
          return true;
        }
      }
      if (item.label == "立项报告" || item.label == "验收报告") {
        if (val.report != 100) {
          return false;
        } else {
          return true;
        }
      }

      return true;
    },
    allowClick(val, item) {
      // 如果没有val
      if (!val) return "pointer";

      console.log(val, "vvv", item);
      // rd 不等于100时 return not-allowed
      // if (item.label == "RD") {
      //   if (val.rd != 100) {
      //     return "not-allowed";
      //   } else {
      //     return "pointer";
      //   }
      // }
      if (item.label == "PS") {
        if (val.ps != 100) {
          return "not-allowed";
        } else {
          return "pointer";
        }
      }
      if (item.label == "立项报告" || item.label == "验收报告") {
        if (val.report != 100) {
          return "not-allowed";
        } else {
          return "pointer";
        }
      }
    },
    changeTab(item, index) {
      // if(index == 2) return this.$message.warning('敬请期待')
      if (item.name == this.activeName) return;
      if (item.name != this.activeName && this.changeable) {
        this.activeName = item.name;
      }
      this.$emit("tab-click", item.name);
    },
  },
  watch: {
    activeName(val) {
      this.$emit("change", val);
    },
    value(val) {
      this.activeName = val;
    },
  },
};
</script>

<style scoped lang="scss">
.type-tab-container {
  display: flex;
  align-items: center;
  height: 44px;

  .type-tab-item {
    position: relative;
    padding-bottom: 16px;
    margin-right: 50px;
    color: #333333;
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    flex-shrink: 0;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;

    &:hover {
      &:before {
        transform: scale(1, 1);
      }
    }

    &:before {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 3px;
      background-color: #2675D9;
      transform: scale(0, 1);
      transition: all 0.3s ease-in-out;
    }
    .label {
      position: relative;

      .new {
        position: absolute;
        top: 0;
        right: -4px;
        width: 8px;
        height: 8px;
        background: #ff0000;
        border-radius: 50%;
      }
      .newNum {
        position: absolute;
        top: 4px;
        right: -25px;
        width: 24px;
        height: 18px;
        border-radius: 9px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
    }
  }

  .type-tab-item-select {
    color: #2675D9;
    border-bottom: 3px solid #2675D9;
    font-weight: bold;
  }
}
</style>
